<template>
  <v-page>
	<v-header></v-header> 
    <!-- <v-header :title="$t('safe.b0')"></v-header> -->
    <main class="layout-main m-t-md">	
		<!-- 新版登录顶部 开始 -->
		<view class=" top-box">
			<view class="login-title">{{$t('safe.b0')}}</view>
			<!-- 新版登录顶部 结束 -->
		</view>
		<!-- 新版输入开始 -->
		<view class="d-flex justify-center align-center flex-col m-lg">
			<view class="botton-box d-flex justify-center align-center">
				<view class="botton-box__text">{{$t('safe.b1')}}</view>
				<v-input class="color-light botton-box__input" v-model="form.account"
					:placeholder="$t('safe.b8')" @blur="checkAccount"></v-input>
			</view>
			<view class="botton-box d-flex justify-center align-center">
				<v-input class="color-light botton-box__input" v-model="form.password" type="password"
					:placeholder="$t('safe.b4')"></v-input>
			</view>
			<view class="botton-box d-flex justify-center align-center">
				<v-input class="color-light botton-box__input" v-model="form.password_confirmation" type="password"
					:placeholder="$t('safe.b6')"></v-input>
			</view>
			<view class="botton-box d-flex justify-center align-center" v-if="(checkData.phone_status==1&&show) || checkData.email_status==1 || checkData.google_status==1">
				<view class="botton-box__text" v-if="checkData.phone_status==1&&show">SMS{{$t('safe.a7')}}</view>
				<view class="botton-box__text" v-if="checkData.email_status==1">{{$t('safe.a5')}}</view>
				<view class="botton-box__text" v-if="checkData.google_status==1">google{{$t('safe.a7')}}</view>
				<!-- 手机 -->
				<v-input class="color-light botton-box__input" v-model="form.sms_code" 
					:placeholder="$t('safe.a6')" v-if="checkData.phone_status==1&&show">
					<template #right>
					  <v-code
					    url="/user/sendSmsCodeForgetPassword"
					    :data="{phone:form.account,country_code:checkData.country_code || 86,type:'yellow-plain'}"
					  ></v-code>
					  
					  <!-- 谷歌 -->
					  <v-code
					  	v-if="checkData.email_status==1"
					    url="/register/sendEmailCode"
					    :data="{
					    email:form.account,
					    type:'yellow-plain'
					  }"
					    v-show="form.type==2"
					  ></v-code>
					</template>
				</v-input>
				<!-- 邮箱 -->
				<v-input class="color-light botton-box__input" v-model="form.email_code"
					:placeholder="$t('safe.a6')" v-if="checkData.email_status==1">
					<template #right>
						<v-code
						  url="/user/sendEmailCodeForgetPassword"
						  :data="{email:form.account,type:'yellow-plain'}"
						></v-code>
					</template>
				</v-input>
				<v-input v-model="form.google_code" :placeholder="$t('safe.a6')" v-if="checkData.google_status==1"></v-input>
			</view>
		</view>
		<!-- 新版输入 结束 -->
      <!-- <view class="m-md bg-panel-3 rounded-sm overflow-hidden">
        <view class="form-item border-b p-md">
          <view class="label m-b-xs">{{$t('safe.b1')}}</view>
          <view class="input color-light">
            <v-input v-model="form.account" :placeholder="`${$t('safe.b8')}`" @blur="checkAccount"></v-input>
          </view>
        </view>
        <view class="form-item border-b p-md">
          <view class="label m-b-xs">{{$t('safe.b3')}}</view>
          <view class="input color-light">
            <v-input type="password" v-model="form.password" :placeholder="$t('safe.b4')"></v-input>
          </view>
        </view>
        <view class="form-item border-b p-md">
          <view class="label m-b-xs">{{$t('safe.b5')}}</view>
          <view class="input color-light">
            <v-input type="password" v-model="form.password_confirmation" :placeholder="$t('safe.b6')"></v-input>
          </view>
        </view>
        <view class="form-item border-b p-md" v-if="checkData.phone_status==1&&show">
          <view class="label m-b-xs">SMS{{$t('safe.a7')}}</view>
          <view class="input color-light">
            <v-input v-model="form.sms_code" :placeholder="$t('safe.a6')">
              <template #right>
                <v-code
                  url="/user/sendSmsCodeForgetPassword"
                  :data="{country_code:checkData.country_code,phone:form.account}"
                ></v-code>
              </template>
            </v-input>
          </view>
        </view>
        <view class="form-item border-b p-md" v-if="checkData.email_status==1">
          <view class="label m-b-xs">{{$t('safe.a5')}}</view>
          <view class="input color-light">
            <v-input v-model="form.email_code" :placeholder="$t('safe.a6')">
              <template #right>
                <v-code url="/user/sendEmailCodeForgetPassword" :data="{email:form.account}"></v-code>
              </template>
            </v-input>
          </view>
        </view>
        <view class="form-item border-b p-md" v-if="checkData.google_status==1">
          <view class="label m-b-xs">google{{$t('safe.a7')}}</view>
          <view class="input color-light">
            <v-input v-model="form.google_code" :placeholder="$t('safe.a6')"></v-input>
          </view>
        </view>
      </view> -->
    </main>
    <view class="p-md">
      <v-button class="w-max rounded-lg" block ref="btn" type="yellow" @click="submit">{{$t('safe.b7')}}</v-button>
    </view>
    <van-toast id="van-toast" />
  </v-page>
</template>
<script>
import Setting from "@/api/setting";
export default {
  data() {
    return {
      country_id: 1,
      form: {
        account: "",
        sms_code: "",
        email_code: "",
        google_code: "",
        password: "",
        password_confirmation: "",
        show:false
      },
      checkData: {},
    };
  },
  computed: {
  },
  watch:{
      'form.account':{
           handler(newVal){
              if(newVal.indexOf('@')!=-1){
                  this.show=false
              }else{
                  this.show=true
              }
          },
      }
  },
  methods: {
    checkAccount() {
      Setting.forgetPasswordAttempt({ account: this.form.account })
        .then((res) => {
          this.checkData = res.data;
        })
        .catch(() => {
          this.checkData = {};
          if (this.form.account) {
            this.$toast(this.$t('safe.b8'));
          }
        });
    },
    submit() {
        if(this.form.account==''){
            this.$toast(this.$t('safe.b2')+'/'+this.$t('safe.a3'))
            return
        }
        if(this.form.password==''){
            this.$toast(this.$t('safe.b4'))
            return
        }
        if(this.form.password_confirmation==''){
            this.$toast(this.$t('safe.b6'))
            return
        }
      Setting.forgetPassword(this.form, { btn: this.$refs.btn })
        .then(() => {
          this.$back();
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
	
	.top-box {
		padding: 40px 0 60px 30px;
	}
	
	.botton-box {
		box-sizing: border-box;
		width: 100%;
		padding: 5px 20px;
		margin-top: 20px;
		height: 50px;
		background: #2B2B2B;
		border-radius: 31px 31px 31px 31px;
		opacity: 1;
	}
	
	.botton-box__text {
		text-wrap: nowrap;
		margin-right: 15px;
		font-size: 16px;
		font-weight: 400;
		color: #FFFFFF;
		-webkit-background-clip: text;
	}
	
	.botton-box__input {
		width: 100%;
		margin-right: auto;
	}
	
	.login-title {
		font-size: 25px;
		font-weight: bold;
		color: #FFFFFF;
	}
	.bottom-text {
		font-size: 14px;
		font-weight: 400;
		color: #999999;
	}
	.color-yellow {
		color: #DEB23C;
	}
</style>